<template>
	<view>
		<!--顶部S-->
		<view class="top-box  level_align flex_around tp-h88">
			<view class="dingwei  center_combo tp-bgf" @click="pageJumps('../make/selectCity')">
				<image src="../static/icon/position.png" class="tp-img28 tp-mr15" mode=""></image>
				<text class="font">{{nowCity}}</text>
				<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
			</view>
			<view class="search  tp-bbox">
				<uni-search-bar radius="100" placeholder="请输入关键字" bgColor="#fff" @cancel="search" @clear="search" @confirm="search" />
			</view>
		</view>
		<!--顶部E-->
		<!--筛选S-->
		<view class="shaixuan-box tp-h88 tp-bgf level_align tp-bbox flex_between tp-fc333 tp-fz28 tp-ptb0lr30 tp-pr">
			<view class="level_align tp-h100" @click="showChange(0)" :style="{color: showIndex == 0 ? '#00B4FF': ''}">
				<text class="tp-mr15">位置区域</text>
				<image v-show="showIndex != 0" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 0" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(1)" :style="{color: showIndex == 1 ? '#00B4FF': ''}">
				<text class="tp-mr15">{{hotelTypeVal.value == '全部' || !hotelTypeVal.value  ?'酒店类型' : hotelTypeVal.value }}</text>
				<image v-show="showIndex != 1" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 1" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(2)" :style="{color: showIndex == 2 ? '#00B4FF': ''}">
				<text class="tp-mr15">排序</text>
				<image v-show="showIndex != 2" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 2" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(3)" :style="{color: showIndex == 3 ? '#00B4FF': ''}">
				<text class="tp-mr15">筛选</text>
				<image v-show="showIndex != 3" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 3" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<image @click="isHang = !isHang" v-if="isHang" class="tp-img36" src="../static/icon/heng.png" mode=""></image>
			<image @click="isHang = !isHang" v-if="!isHang" class="tp-img36" src="../static/icon/kuai.png" mode=""></image>
		</view>
		<!--筛选E-->

		<!-- 列表 S -->
		<view class="list-box ">
			<!-- 行展示 S -->
			<view v-if="isHang" class="list-hang tp-ptb0lr30  level_align tp-bgf" style="padding-top: 30rpx;" @click="pageJumps('./hotelDetail?id='+ item.hotelId)"
			 v-for="(item,index) in list" :key="index">
				<image class="hang-img tp-mr20 tp-br12" :src="wwwImgUrl + item.hotelCover" mode=""></image>
				<view class="hang-right flex flex_column flex-1">
					<view class="tp-fz28 tp-fc333 ellispsis1">
						{{item.hotelName}}
					</view>
					<view class="level_align flex_between tp-mt20">
						<text class="huang-color">{{item.hotelLevel}} | {{item.hotelScore}}分</text>
						<text class="tp-fc999" v-if="item.distance">距您{{item.distance}}km</text>
					</view>
					<view class="level_align tp-mt20">
						<image class="tp-img28 tp-mr15" src="../static/icon/position1.png" mode=""></image>
						<text class="ellispsis1 flex-1">{{item.hotelLocation || ''}}</text>
					</view>
					<view class="level_align flex_between tp-mt20">
						<text class="ellispsis1 tp-fc tp-mr20"><text v-for="(ite,ind) in item.salePoints" :key="ind">{{'#' +ite}} </text></text>
						<view class="tp-fz24 tp-red tp-fw600">
							￥<text class="tp-fz36">{{item.hotelPrice}}</text>起
						</view>
					</view>
				</view>
			</view>
			<!-- 行展示 E -->

			<!-- 块展示 S-->
			<view v-if="!isHang" class=" tp-ptb0lr30  level_align flex_wrap">
				<view class="list-kuai flex " @click="pageJumps('./hotelDetail?id=' + item.hotelId)" v-for="(item,index) in list"
				 :key="index" :class="((index + 1) % 2) == 0? 'flex_end': ''">
					<view class="tp-br12 tp-bgf tp-mb20" style="width: 335rpx;">
						<image class="kuai-img" :src="wwwImgUrl + item.hotelCover" mode="aspectFill"></image>
						<view class="flex flex_column tp-ptb0lr20 tp-pb20">
							<view class="ellispsis1 tp-h64 tp-lh64 tp-fc333 tp-fz28 ">
								{{item.hotelName}}
							</view>
							<view class="huang-color">{{item.hotelLevel}} | {{item.hotelScore}}分</view>
							<view class="ellispsis1 tp-fc tp-mt10"> <text v-for="(ite,ind) in item.salePoints" :key="ind">{{'#' +ite}}
								</text></view>
							<view class="level_align flex_between tp-mt10">
								<view class="tp-fz24 tp-red tp-fw600">
									￥<text class="tp-fz36">{{item.hotelPrice}}</text>起
								</view>
								<text class="tp-fc999">距您{{item.distance}}km</text>
							</view>
						</view>

					</view>

				</view>

			</view>
			<!-- 块展示 E -->

		</view>
		<!-- 列表 E -->
		<!-- 暂无数据 S -->
		<view v-if="list.length == 0">
			<view class="tp-h98 tp-w100"></view>
			<text class="tp-h98 center_combo">暂无数据</text>
			<view class="tp-h98 tp-w100"></view>
		</view>
		<!-- 暂无数据 E -->


		<!-- 筛选的弹框 S -->
		<uni-popup id="popup" ref="popup" type="top" :animation="false" @change="filtratePopup">
			<view class="popup-content tp-bgf  tp-w100" style="top: 176rpx;position: fixed;border-top: 2rpx solid #e6e6e6">
				<!-- 位置区域 S -->
				<view v-if="showIndex == 0" class="area-box  tp-fc333 tp-fz28">
					<view class="flex">
						<view class="area-left">
							<scroll-view scroll-y="true" class="scroll-Y">
								<view class="scroll-view-item center_combo" @click="changeLeft(item,index)" v-for="(item,index) in leftlist"
								 :key="index" :class="leftActive == index?'active':''">
									{{item}}
								</view>
							</scroll-view>
						</view>
						<view class="area-right flex-1">
							<scroll-view scroll-y="true" class="scroll-Y">
								<view class="scroll-view-item  level_align tp-ptb0lr30" @click="changeRight(item,index)" v-for="(item,index) in rightlist[leftActive]"
								 :key="index" :class="rightActive == index?'active':''">
									{{item.label}}
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="area-bottom center_combo">
						<view @click="filtratePopupClose(0)" class="btn tp-mr30 tp-bcF5 tp-fc666  center_combo">
							取消
						</view>
						<view @click="areaSearch(0)" class="btn tp-bc tp-fcF center_combo">
							确定
						</view>
					</view>
				</view>
				<!-- 位置区域 E -->

				<!-- 酒店类型 S -->
				<view v-if="showIndex == 1" class="tp-h88 tp-w100 level_align tp-bgf tp-ptb0lr30 tp-bdbm tp-fc333 tp-fz30" v-for="(item,index) in hotelType"
				 :key="index" @click="selectHotel(item)">
					{{item.value}}
				</view>
				<!-- 酒店类型 E -->

				<!-- 排序 S -->
				<view v-if="showIndex == 2" class="tp-bgf tp-ptb0lr30">
					<view class="level_align tp-h64 tp-mt20">
						价格
					</view>
					<view class="price-box">
						<view class="top level_align flex_around">
							<input type="number" v-model="minPrice" placeholder="最低价" />
							<text class="tp-fc999">——</text>
							<input type="number" v-model="maxPrice" placeholder="最高价" />
						</view>
					</view>
					<view class="level_align tp-h64 tp-mt20">
						排序
					</view>
					<view class="tp-mb20 tp-mt20 level_align">
						<view class="tp-dib tp-bcF5 tp-h64 tp-mr30 tp-br12 tp-tc tp-lh64 tp-fc333 tp-fz26 tp-ptb0lr30" @click="changeSort('1')" 
						 :style="{background:sortPrice == 1?'#00B4FF':'',color:sortPrice == 1?'#fff':'#333'}">
							价格从高到低
						</view>
						<view class="tp-dib tp-bcF5 tp-h64 tp-tc tp-lh64 tp-br12 tp-fc333 tp-fz26 tp-ptb0lr30"  @click="changeSort('0')" 
						 :style="{background:sortPrice == 0?'#00B4FF':'',color:sortPrice == 0?'#fff':'#333'}">
							价格从低到高
						</view>
					</view>
					<view class="level_align tp-h64 tp-mt20">
						星级
					</view>
					<view class="tp-mb20 tp-mt20">
						<view class="tag tp-fc333 tp-fz26 tp-mb20" @click="changeFang(item,index,0)" v-for="(item,index) in xingList" :key="index"
						 :style="{marginRight:(index+1) % 4 == 0?'0':'25rpx',marginTop:index > 3?'20rpx':'',background:xingActive == index?'#00B4FF':'',color:xingActive == index?'#fff':'#333'}">
							{{item.value}}
						</view>
					</view>
					<view class="tp-h2 tp-bcF5"></view>
					<view class="area-bottom center_combo">
						<view @click="reset2" class="btn tp-mr30 tp-bcF5 tp-fc999 center_combo">
							重置
						</view>
						<view @click="areaSearch(1)" class="btn tp-bc tp-fcF center_combo">
							确定
						</view>
					</view>
				</view>
				<!-- 排序 E -->
				<!-- 卖点 S -->
				<view v-if="showIndex == 3" class="area-box">
					<view class="tp-pd30">
						<view class="tag tp-fc333 tp-fz26" @click="changeFang(item,index,1)" v-for="(item,index) in sellingList" :key="index"
						 :style="{marginRight:(index+1) % 4 == 0?'0':'25rpx',marginTop:index > 3?'20rpx':'',background:item.choosed ? '#00B4FF':'',color:item.choosed ?'#fff':'#333'}">
							{{item.value}}
						</view>
					</view>
					<view class="tp-h2 tp-bcF5"></view>
					<view class="area-bottom center_combo">
						<view @click="filtratePopupClose(3)" class="btn tp-mr30 tp-bcF5 tp-fc999 center_combo">
							取消
						</view>
						<view @click="areaSearch(2)" class="btn tp-bc tp-fcF center_combo">
							确定
						</view>
					</view>
				</view>
				<!-- 卖点 E -->
			</view>
		</uni-popup>
		<!-- 筛选的弹框 E-->
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isHang: false, // 行排列true 还是 块false
				showIndex: 4, //  0位置区域 	1酒店类型 2排序	3筛选  4什么都不选
				nowCity: '', // 当前选择的城市
				leftlist: [], // 选择位置区域 左边数据
				rightlist: [], // 选择位置区域	右边数据e: 0, 
				leftActive: 0, // 选择位置区域	左边被选中// 选择位置区域	左边被选中
				leftVal: '', // 选择位置区域	左边被选中的值
				rightActive: 0, // 选择位置区域	右边被选中
				rightVal: {}, // 选择位置区域	右边被选中的值

				hotelType: [], // 酒店类型
				hotelTypeVal: {}, // 选中的酒店类型

				minPrice: null, // 最低价格
				maxPrice: null, // 最高价格 
				sortPrice: null, // 价格升序降序0升序1降序

				xingList: [], // 星级
				xingActive: null, // 选择房型 被选中的下标
				xingVal: {}, // 选择房型 被选中的值
				sellingList: [], // 卖点
				sellingActive: null, // 选择卖点 被选中的下标
				sellingVal: {}, // 选择卖点 被选中的值

				list: [], // 页面列表
				searchVal: '', // 搜索的内容
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
			};
		},
		onLoad(opt) {
			console.log('opt',opt);
			this.searchVal = opt.searchVal && opt.searchVal
			this.mixinInitMap()
			console.log(opt)
			this.getSearchAreaList()
			for (let i = 100; i < 103; i++) {
				this.getDictData(i)
			}
			this.nowCity = this.$store.getters.getChangeNowCity
			this.getHotelList()
			
			
		},
		onShow() {
			if (this.$store.getters.getChangeNowCity != this.nowCity) {
				this.nowCity = this.$store.getters.getChangeNowCity
				this.pageNum = 1
				this.getHotelList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.pageNum = 1
			this.list = []
			this.loadMoreText = "加载中..."
			this.getHotelList()
		},
		// 上拉触底
		onReachBottom() {
			if (this.pageNum < this.last_page) {
				this.showLoadMore = true;
				this.pageNum++
				this.getHotelList()
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		methods: {
			// 获取页面数据
			// getPageDate(){
			// 	this.getSearchAreaList()
			// },
			// 获取酒店列表
			getHotelList() {
				let distance = this.leftVal == '距离' ? this.rightVal.value : null
				let locationSearchId = this.leftVal != '距离' ? this.rightVal.value : null
				let arr = []
				this.sellingList.forEach(item => {
					if (item.choosed) {
						arr.push(item.id)
					}
				})
				let param = {
					hotelType: this.hotelTypeVal.id,
					hotelLevel: this.xingVal.id,
					distance: distance,
					locationSearchId: locationSearchId,
					maxPrice: this.maxPrice,
					minPrice: this.minPrice,
					keyWords: this.searchVal,
					city: this.nowCity,
					sortPrice: this.sortPrice,
					salePoints: arr
				}
				this.$http.post(this.$api.hotelIndex + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize, param).then(res => {
					uni.stopPullDownRefresh();
					this.showLoadMore = false;
					if (res.code === 200) {
						this.last_page = res.data.pageTotal

						if (this.pageNum > 1) {
							this.list = this.list.concat(res.data.result);
							// this.list.push(this.list[0])
						} else {
							this.list = res.data.result
						}
						if(this.searchVal){  // 如果是目的地搜索过来的，请求之后
							this.searchVal = ''
						}
					}
				})
			},
			// 获取位置区域
			getSearchAreaList() {
				this.$http.get(this.$api.searchAreaList).then(res => {
					if (res.code === 200) {
						let obj = {
							label: '不限',
							value: null
						}
						this.leftlist = res.data.leftList
						this.rightlist = res.data.rightList
						this.rightlist.forEach(item => {
							item.unshift(obj)
						})
					}
				})
			},
			// 各种下拉选项设置100.酒店卖点  101.酒店星级 102.酒店类型 
			getDictData(type) {
				this.$http.get(this.$api.dictData + '?type=' + type).then(res => {
					if (res.code === 200) {
						if (type == 102) {
							let obj = {
								value: '全部',
								id: null
							}
							this.hotelType = res.data
							this.hotelType.unshift(obj)
						} else if (type == 101) {
							this.xingList = res.data
						} else if (type == 100) {
							res.data.map(item => {
								item.choosed = false
							})
							this.sellingList = res.data
						}
					}
				})
			},
			// 搜索
			search(e) {
				console.log(e);
				this.searchVal = e.value
				this.pageNum = 1
				this.getHotelList()
			},
			// 选择的切换
			showChange(ind) {
				this.showIndex = ind
				this.$refs.popup.open()
			},
			// 改变区域左侧
			changeLeft(item, index) {
				this.leftActive = index
				this.leftVal = item
				this.rightActive = 0
			},
			// 改变区域右侧
			changeRight(item, index) {
				this.rightActive = index
				this.rightVal = item
			},
			// 筛选弹框显示隐藏改变
			filtratePopup(e) {
				if (!e.show) {
					this.showIndex = 4
				}
			},
			// 排序重置
			reset2() {
				this.minPrice = null
				this.maxPrice = null
				this.sortPrice = null
				this.xingActive = null
				this.xingVal = {}
			},
			// 取消
			filtratePopupClose(index) {
				if (index == 0) {
					this.leftActive = 0
					this.leftVal = ''
					this.rightActive = 0
					this.rightVal = {}
				}
				if (index == 3) {
					this.sellingList.forEach(item => {
						return item.choosed = false
					})
				}
				this.showIndex = 4
				this.$refs.popup.close()
				this.getHotelList()
			},
			// 点击确定
			areaSearch(ind) {
				if (ind == 1) {
					if (Number(this.minPrice) > Number(this.maxPrice)) {
						return uni.showToast({
							title: '请输入正确的最高价',
							icon: 'none'

						})
					}
				}
				this.pageNum = 1
				this.showIndex = 4
				this.$refs.popup.close()
				this.getHotelList()
			},
			// 输入最低价
			minInput(e) {
				console.log(e);
				if (!this.maxPrice || this.maxPrice > e.datel.value) {
					this.minPrice = e.datel.value
				} else {
					this.minPrice = null
					return uni.showToast({
						title: ''
					})
				}
			},
			// 输入最低价
			maxInput(e) {
				console.log(e);
			},
			// 选择酒店
			selectHotel(item) {
				this.hotelTypeVal = item
				this.pageNum = 1
				this.$refs.popup.close()
				this.getHotelList()
			},
			// 切换排序
			changeSort(type) {
				if (this.sortPrice == type) {
					this.sortPrice = null
				} else {
					this.sortPrice = type
				}
			},
			// 改变房型
			changeFang(item, index, type) {
				if (type == 0) { // 星级
					this.xingActive = index
					this.xingVal = item
				} else if (type == 1) { // 卖点
					// this.sellingActive = index
					this.sellingVal = item
					return item.choosed = !item.choosed
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		background: #00B4FF;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;

		.dingwei {
			width: 180rpx;
			height: 56rpx;
			border-radius: 28rpx;
		}

		.dingweiimg {
			width: 28rpx;
			height: 28rpx;
		}

		.search {
			width: 480rpx;
			padding: 16rpx 0;

			/deep/ .uni-searchbar {
				height: 56rpx;
			}

			/deep/ .uni-searchbar__cancel {
				line-height: 56rpx;
			}

			/deep/ .uni-searchbar__cancel {
				color: #fff;
			}
		}
	}

	.shaixuan-box {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 176rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;
	}

	.list-box {
		margin-top: 200rpx;

		.hang-img {
			width: 248rpx;
			height: 208rpx;
		}

		.hang-right {
			height: 208rpx;
		}

		.huang-color {
			color: #FFAF3C;
		}

		.list-kuai {
			width: 50%;

			.kuai-img {
				width: 335rpx;
				height: 280rpx;
				border-radius: 12rpx 12rpx 0px 0px;
			}
		}

	}

	.popup-content {
		.area-bottom {
			height: 120rpx;
			border-top: 2rpx solid #EBEBEB;

			.btn {
				width: 260rpx;
				height: 72rpx;
				border-radius: 36rpx;
			}
		}

		.area-box {
			width: 750rpx;
			background: #FFFFFF;

			.scroll-Y {
				max-height: 554rpx;
			}

			.area-left {
				width: 260rpx;

				.scroll-view-item {
					height: 88rpx;
					background: #F5F5F5;

					&.active {
						background: #FFFFFF;
						position: relative;
						color: $tc;

						&::before {
							position: absolute;
							top: 0;
							left: 0;
							content: "";
							width: 6rpx;
							height: 88rpx;
							background: #00B4FF;
						}
					}
				}
			}

			.area-right {
				.scroll-view-item {
					height: 72rpx;
					background: #FFFFFF;


					&.active {
						color: $tc;
					}
				}
			}
		}

		.price-box {
			background: #FFFFFF;

			.top {
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				input {
					width: 280rpx;
					height: 64rpx;
					background: rgba(245, 245, 245, 1);
					border-radius: 8rpx;
					text-align: center;
				}

			}
		}

		.tag {
			display: inline-block;
			width: 154rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #F5F5F5;
			border-radius: 8rpx;
			margin-right: 26rpx;
		}
	}
</style>
